<%@page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>*</title>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/examples/references.js"></script>
</head>
<body>
	<div class="post">
		<div class="clearfix" style="margin-bottom: 20px;">
			<div class="info">
				<h2>
					<a
						href="http://www.quizzpot.com/2009/03/referencias-en-javascript/">Referencias
						en JavaScript</a>
				</h2>
				<span class="smalltext">Mar 02, 2009 | <a
					href="http://www.quizzpot.com/category/es/" title="Español">Español</a>
					| By <a href="http://www.quizzpot.com/author/admin/"
					title="Posts by Crysfel" rel="author">Crysfel</a> | <a
					href="http://www.quizzpot.com/2009/03/referencias-en-javascript/#comments"
					title="Comment on Referencias en JavaScript">22 Comments</a> | <a
					href="http://www.quizzpot.com/2009/03/javascript-references/">Read
						in English</a>
				</span>
				<p>Una referencia es un puntero al lugar exacto donde se
					encuentra un objeto, en JavaScript este es un concepto fundamental
					que debemos conocer y dominar.</p>
			</div>
			<div class="tns">
				<div>
					<a
						href="http://www.quizzpot.com/2009/03/referencias-en-javascript/"><img
						src="http://www.quizzpot.com/wp-content/uploads/2009/03/gotoimage.jpg"
						alt="Referencias en JavaScript"></a>
				</div>
			</div>
		</div>

		<div class="author clearfix">
			<img alt=""
				src="http://1.gravatar.com/avatar/7344c04fee0e5535e239b2a83623041a?s=80&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D80&amp;r=G"
				class="avatar avatar-80 photo" height="80" width="80"> <strong>Author:
				<a href="http://www.crysfel.com ">Crysfel</a>
			</strong>
			<p>
				I'm a software developer with 6+ years of experience, when I'm not
				developing software I may be writing a tutorial, you can follow me
				on <a href="http://twitter.com/crysfel">twitter</a>
			</p>
		</div>

		<div class="control-panel">
			<p class="clearfix">
				<a
					href="http://www.quizzpot.com/wp-content/uploads/2009/03/references-src.zip"
					class="btn download"><span>Download</span></a>
			</p>
		</div>

		<div class="video">
			<object width="504" height="380">
				<param name="allowfullscreen" value="true">
				<param name="allowscriptaccess" value="always">
				<param name="movie"
					value="http://vimeo.com/moogaloop.swf?clip_id=3431499&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=474747&amp;fullscreen=1">
				<embed
					src="http://vimeo.com/moogaloop.swf?clip_id=3431499&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=474747&amp;fullscreen=1"
					type="application/x-shockwave-flash" allowfullscreen="true"
					allowscriptaccess="always" width="504" height="380">
			</object>
		</div>

		<h3>Definición</h3>
		<p>Físicamente los objetos están alojados en la memoria y
			accedemos a ellos mediante una referencia, la cual esta contenida en
			una variable. Múltiples variables pueden hacer referencia al mismo
			objeto, a su vez este objeto puede contener referencias a otros
			objetos como por ejemplo strings, numbers, arrays, etc.</p>
		<p>Cuando múltiples variables apuntan a un mismo objeto y éste es
			modificado, el cambio se reflejará en todas las variables que están
			haciendo referencia al objeto. Un ejemplo de esto es lo siguiente:</p>
		<div class="dp-highlighter">
			<div class="bar">
				<div class="tools">
					<a href="#"
						onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view
						plain</a><a href="#"
						onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy
						to clipboard</a><a href="#"
						onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a
						href="#"
						onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a>
				</div>
			</div>
			<ol start="1" class="dp-c">
				<li class="alt"><span><span class="comment">//Se&nbsp;crea&nbsp;un&nbsp;objeto&nbsp;vacío</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span><span class="keyword">var</span><span>&nbsp;obj&nbsp;=&nbsp;{};&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;</span></li>
				<li class=""><span><span class="comment">//Se&nbsp;crea&nbsp;una&nbsp;referencia</span><span>&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span><span class="keyword">var</span><span>&nbsp;reference&nbsp;=&nbsp;obj;&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;</span></li>
				<li class="alt"><span><span class="comment">//Se&nbsp;agrega&nbsp;una&nbsp;propiedad&nbsp;al&nbsp;objeto&nbsp;original</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>obj.property&nbsp;=&nbsp;1;&nbsp;&nbsp;</span></li>
				<li class="alt"><span>&nbsp;&nbsp;</span></li>
				<li class=""><span><span class="comment">//La&nbsp;referencia&nbsp;puede&nbsp;acceder&nbsp;a&nbsp;la&nbsp;propiedad&nbsp;recién&nbsp;creada</span><span>&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>console.debug(<span class="string">'reference.property&nbsp;=&nbsp;'</span><span>+reference.property);&nbsp;&nbsp;</span></span></li>
			</ol>
		</div>
		<pre name="code" class="javascript" style="display: none;">//Se crea un objeto vacío
var obj = {};

//Se crea una referencia
var reference = obj;

//Se agrega una propiedad al objeto original
obj.property = 1;

//La referencia puede acceder a la propiedad recién creada
console.debug('reference.property = '+reference.property);
</pre>
		<p>El mismo principio se aplica para los arreglos, aunque estos se
			modifican a si mismos mediante el método “push” las referencias se
			verán afectadas. Analicemos el ejemplo siguiente:</p>
		<div class="dp-highlighter">
			<div class="bar">
				<div class="tools">
					<a href="#"
						onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view
						plain</a><a href="#"
						onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy
						to clipboard</a><a href="#"
						onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a
						href="#"
						onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a>
				</div>
			</div>
			<ol start="1" class="dp-c">
				<li class="alt"><span><span class="keyword">var</span><span>&nbsp;array&nbsp;=&nbsp;[</span><span
						class="string">'Ext&nbsp;JS'</span><span>,</span><span
						class="string">'Mootools'</span><span>,</span><span class="string">'jQuery'</span><span>];&nbsp;&nbsp;</span></span></li>
				<li class=""><span><span class="keyword">var</span><span>&nbsp;ref&nbsp;=&nbsp;array;&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;</span></li>
				<li class=""><span>array.push(<span class="string">'prototype'</span><span>);&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;</span></li>
				<li class=""><span>console.debug(ref.length&nbsp;==&nbsp;array.length);&nbsp;&nbsp;</span></li>
				<li class="alt"><span>console.debug(ref);&nbsp;&nbsp;</span></li>
			</ol>
		</div>
		<pre name="code" class="javascript" style="display: none;">var array = ['Ext JS','Mootools','jQuery'];
var ref = array;

array.push('prototype');

console.debug(ref.length == array.length);
console.debug(ref);
</pre>
		<h3>Referencias sólo a objetos</h3>
		<p>Es importante mencionar que en JavaScript las referencias sólo
			apuntan a objetos en memoria y no a otras referencias como el
			lenguaje C/C++. En el siguiente ejemplo se muestra este
			comportamiento:</p>
		<div class="dp-highlighter">
			<div class="bar">
				<div class="tools">
					<a href="#"
						onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view
						plain</a><a href="#"
						onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy
						to clipboard</a><a href="#"
						onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a
						href="#"
						onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a>
				</div>
			</div>
			<ol start="1" class="dp-c">
				<li class="alt"><span><span class="comment">//Se&nbsp;crea&nbsp;el&nbsp;objeto&nbsp;original</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span><span class="keyword">var</span><span>&nbsp;obj1&nbsp;=&nbsp;{property:</span><span
						class="string">'Original&nbsp;value'</span><span>};&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span><span class="comment">//Se&nbsp;hace&nbsp;una&nbsp;referencia&nbsp;al&nbsp;objeto&nbsp;original</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span><span class="keyword">var</span><span>&nbsp;ref1&nbsp;=&nbsp;obj1;&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;</span></li>
				<li class=""><span><span class="comment">//obj1&nbsp;apunta&nbsp;a&nbsp;un&nbsp;Nuevo&nbsp;objeto</span><span>&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>obj1&nbsp;=&nbsp;{property:<span
						class="string">'New&nbsp;Object!'</span><span>};&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;</span></li>
				<li class="alt"><span><span class="comment">//Ref1&nbsp;apunta&nbsp;al&nbsp;objeto&nbsp;original,&nbsp;por&nbsp;lo&nbsp;tanto&nbsp;son&nbsp;diferentes</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>console.debug(<span class="string">'same&nbsp;object&nbsp;=&nbsp;'</span><span>+(obj1.property&nbsp;==&nbsp;ref1.property));&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>console.debug(obj1.property);&nbsp;&nbsp;</span></li>
				<li class=""><span>console.debug(ref1.property);&nbsp;&nbsp;</span></li>
			</ol>
		</div>
		<pre name="code" class="javascript" style="display: none;">//Se crea el objeto original
var obj1 = {property:'Original value'};
//Se hace una referencia al objeto original
var ref1 = obj1;

//obj1 apunta a un Nuevo objeto
obj1 = {property:'New Object!'};

//Ref1 apunta al objeto original, por lo tanto son diferentes
console.debug('same object = '+(obj1.property == ref1.property));
console.debug(obj1.property);
console.debug(ref1.property);
</pre>
		<h3>Concatenación</h3>
		<p>Los strings también son objetos y hacemos referencia a estos
			mediante una variable; es importante recordar que cuando se concatena
			uno o más strings siempre resulta un nuevo objeto. En el siguiente
			ejemplo se muestra que al concatenar un texto se crea un nuevo string
			y por lo tanto la referencia queda apuntando al string original.</p>
		<div class="dp-highlighter">
			<div class="bar">
				<div class="tools">
					<a href="#"
						onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view
						plain</a><a href="#"
						onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy
						to clipboard</a><a href="#"
						onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a
						href="#"
						onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a>
				</div>
			</div>
			<ol start="1" class="dp-c">
				<li class="alt"><span><span class="keyword">var</span><span>&nbsp;str&nbsp;=&nbsp;</span><span
						class="string">'Hello&nbsp;world!'</span><span>;&nbsp;&nbsp;</span></span></li>
				<li class=""><span><span class="keyword">var</span><span>&nbsp;refStr&nbsp;=&nbsp;str;&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;</span></li>
				<li class=""><span>str&nbsp;+=&nbsp;<span class="string">'&nbsp;this&nbsp;is&nbsp;Crysfel'</span><span>;&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>console.debug(<span class="string">'same&nbsp;string&nbsp;=&nbsp;'</span><span>+(str&nbsp;===&nbsp;refStr));&nbsp;&nbsp;</span></span></li>
			</ol>
		</div>
		<pre name="code" class="javascript" style="display: none;">var str = 'Hello world!';
var refStr = str;

str += ' this is Crysfel';
console.debug('same string = '+(str === refStr));
</pre>
		<p>Si tienen alguna duda o sugerencia sobre este tema de
			referencias, pueden hacer preguntas en los comentarios, con gusto las
			responderé.</p>
		<div class="wp_twitter_button"
			style="float: right; margin-left: 10px;">
			<iframe
				src="http://platform.twitter.com/widgets/tweet_button.html#_=1323061744723&amp;count=horizontal&amp;counturl=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F03%2Freferencias-en-javascript%2F&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F03%2Freferencias-en-javascript%2F&amp;text=Referencias%20en%20JavaScript%20%C2%BB%20Quizzpot&amp;url=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F03%2Freferencias-en-javascript%2F&amp;via=quizzpot"
				allowtransparency="true" frameborder="0" scrolling="no"
				class="twitter-share-button twitter-count-horizontal"
				style="width: 110px; height: 20px;"
				title="Twitter For Websites: Tweet Button"></iframe>
		</div>
		<iframe
			src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F03%2Freferencias-en-javascript%2F&amp;layout=standard&amp;show_faces=true&amp;width=300&amp;height=25&amp;action=like&amp;font=trebuchet ms&amp;colorscheme=light"
			id="fbLikeIframe" name="fbLikeIframe" scrolling="no" frameborder="0"
			allowtransparency="true" class="fbLikeContainer"
			style="border: none; overflow: hidden; width: 300px; height: 25px; display: inline;"></iframe>
	</div>
</body>
</html>